<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  span{
    width: 500px;
    height: 200px;
    
  }
  input{
    width: 200px;
    margin: 0 auto;
    /* display: block; */
  }
  
</style>
<body>
    <!-- 行内元素 行内块元素 块级元素 -->
    <!-- 像span这样的标签，我们称为行内元素（设置宽高不起作用）i,b... -->
   <span>我是一个span标签</span>
   <span>我是一个span标签</span>
   <!-- 像input标签这样的元素，我们称为行内块元素（可以设置宽高，但是不独占一行） 特别注意：行内块元素不能使用 margin: 0 auto; 来左右居中-->
   <div>
    <span>姓名</span> <input type="text" placeholder="请输入内容"> 
   </div>
   <div>
    <input type="text" placeholder="请输入内容"> 
   </div>
   <!-- 块级元素，独占一行，并且可以这只宽高。 -->

   <!-- display: inline-block;可以把块级元素或者是行内元素，变成行内块元素 -->
   <!-- display: inline; 可以把块级元素和行内块元素，变成行内元素-->
   <!-- display: block; 可以把行内元素，行内块元素变成块级元素 -->


   <!-- 语义化标签有什么优点？ -->
   <!-- header 头部 -->
   <!-- 1.让代码的可阅读性变高。 -->
   <!-- 2.优化页面的搜索概率，提高检索率 -->
   <!-- 当你在搜索引擎里面去检索关子健字的时候，首先去库匹配，标题包含关键字的 -->
   <header>我是头部</header>
   <h1>小洋人</h1>
</body>
</html>
<script>
  
</script>